<template>
    <div class="index-zyfz">
        <div class="left">
            <img
                src="~/assets/images/index-sb/xzxy-title1.png"
                class="title"
                alt=""
            />
            <div class="button" @click="go('/school/vipzjkc')">
                全站通会员
                <img
                    src="~/assets/images/index-sb/xzxy-icon1.png"
                    class="icon"
                    alt=""
                />
                <img
                    src="~/assets/images/index-sb/xzxy-icon-right.png"
                    class="right-icon"
                    alt=""
                />
            </div>
            <div class="button" @click="go('/school/mdcs')">
                自有课程
                <img
                    src="~/assets/images/index-sb/xzxy-icon2.png"
                    class="icon"
                    alt=""
                />
                <img
                    src="~/assets/images/index-sb/xzxy-icon-right.png"
                    class="right-icon"
                    alt=""
                />
            </div>
        </div>
        <div style="width: 350px"></div>
        <div class="right">
            <img
                src="~/assets/images/index-sb/xzxy-title2.png"
                class="title"
                alt=""
            />
            <div class="button" @click="go('/indices/xzxy-xzzy?type=1')">
                考证课程
                <img
                    src="~/assets/images/index-sb/xzxy-icon3.png"
                    class="icon"
                    alt=""
                />
                <img
                    src="~/assets/images/index-sb/xzxy-icon-right.png"
                    class="right-icon"
                    alt=""
                />
            </div>
            <div class="button" @click="go('/indices/xzxy-xzzy?type=2')">
                实操课程
                <img
                    src="~/assets/images/index-sb/xzxy-icon4.png"
                    class="icon"
                    alt=""
                />
                <img
                    src="~/assets/images/index-sb/xzxy-icon-right.png"
                    class="right-icon"
                    alt=""
                />
            </div>
            <div class="button" @click="alertShow()">
                职场课程
                <img
                    src="~/assets/images/index-sb/xzxy-icon5.png"
                    class="icon"
                    alt=""
                />
                <img
                    src="~/assets/images/index-sb/xzxy-icon-right.png"
                    class="right-icon"
                    alt=""
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    async asyncData({ params }) {
        let data = {};
        return data;
    },
    layout: "home",
    head() {
        return {
            title: "会计知识专业问答-财税会计知识问答-小竹财税官网",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    components: {},
    data() {
        return {};
    },
    beforeMount() {},
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
        go(path) {
            this.$router.push({
                path: path,
            });
        },

        alertShow() {
            this.$alert("小主，我马上催老师起床录课！", "提示", {
                confirmButtonText: "确定",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.index-zyfz {
    background-image: url(~/assets/images/index-sb/xzxy-bj.png);
    background-size: 100% 100%;
    padding: 60px 0;
    display: flex;
    justify-content: center;
}

.left,
.right {
    .title {
        width: 156px;
        height: 50px;
        display: block;
        margin: 0 auto 45px;
    }
    .button {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 26px;
        color: #ffffff;
        border-radius: 10px;
        .icon {
            width: auto;
            height: 25px;
            margin-left: 16px;
        }
        .right-icon {
            position: absolute;
            right: 65px;
            width: 20px;
            height: 20px;
        }
    }
}

.left {
    .button {
        width: 476px;
        height: 220px;
        background: #1b87f2;
        margin-bottom: 50px;

        .right-icon {
            top: 100px;
        }
    }
}

.right {
    .button {
        width: 476px;
        height: 166px;
        background: #ff9625;
        margin-bottom: 45px;

        .right-icon {
            top: 73px;
        }
    }
}
</style>